<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 引入vue -->
  <script src="../plugins/vue/vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- 引用element-ui -->
  <link rel="stylesheet" href="../plugins/element-ui/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../plugins/element-ui/index.js" charset="utf-8"></script>
  <!-- 引用axios -->
  <script src="../plugins/axios/axios.min.js" charset="utf-8"></script>

  <!--引入sha256算法对密码进行加密-->
  <script src="../plugins/sha256.js"></script>

  <style type="text/css">
      #app {
          width: 500px;
          height: 600px;
          border: 1px rgb(235, 235, 235) solid;
          border-radius: 10px;
          margin: 100px auto;
          padding: 20px;
          text-align: center;
          background-color: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
      }

      .background {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: -1;
          background-image: url("../img/Catalina.jpeg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
      }
  </style>
</head>

<body>
<!--<el-menu :default-active="activeIndex" mode="horizontal">-->
<!--  <el-row type="flex" class="row-bg" justify="end">-->
<!--    <el-menu-item index="4">-->
<!--      <el-link :underline="false" href="Login.html">回到登录</el-link>-->
<!--    </el-menu-item>-->
<!--  </el-row>-->
<!--</el-menu>-->
<div class="background">
  <img :src="imgSrc" width="100%" height="100%" alt=""/>
</div>
<div id='app'>
  <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
    <el-tab-pane label="租户注册" name="first">
      <el-form status-icon :model='formData' :rules='formRule' label-width='80px' ref='formRef1'>
        <el-form-item prop='username' label='租户名'>
          <el-input v-model='formData.username'></el-input>
        </el-form-item>
        <el-form-item prop='pass' label='密码'>
          <el-input v-model='formData.pass' type="password"></el-input>
        </el-form-item>
        <el-form-item prop='checkPass' label='确认密码'>
          <el-input v-model='formData.checkPass' type="password"></el-input>
        </el-form-item>
        <el-form-item prop='name' label='昵称'>
          <el-input v-model='formData.name'></el-input>
        </el-form-item>
        <el-form-item prop='information' label='客户信息'>
          <el-input v-model='formData.information'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click='onSubmit'>提交</el-button>
          <el-button @click='resetFields("formRef1")'>重置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="用户注册" name="second">
      <el-form status-icon :model='formData2' :rules='formRule2' label-width='80px' ref='formRef2'>
        <el-form-item prop='username' label='用户名'>
          <el-input v-model='formData2.username'></el-input>
        </el-form-item>
        <el-form-item prop='pass' label='密码'>
          <el-input v-model='formData2.pass' type="password"></el-input>
        </el-form-item>
        <el-form-item prop='checkPass' label='确认密码'>
          <el-input v-model='formData2.checkPass' type="password"></el-input>
        </el-form-item>
        <el-form-item prop='name' label='昵称'>
          <el-input v-model='formData2.name'></el-input>
        </el-form-item>
        <el-form-item prop='information' label='客户信息'>
          <el-input v-model='formData2.information'></el-input>
        </el-form-item>
        <el-form-item prop='renterid' label='租户ID'>

          <el-select v-model='formData2.renterid' placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :label="item"
                    :value="item">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item>
          <el-button @click='onSubmit2'>提交</el-button>
          <el-button @click='resetFields("formRef2")'>重置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="答者注册" name="third">
      <el-form status-icon :model='formData3' :rules='formRule3' label-width='80px' ref='formRef3'>
        <el-form-item prop='username' label='答者名'>
          <el-input v-model='formData3.username'></el-input>
        </el-form-item>
        <el-form-item prop='pass' label='密码'>
          <el-input v-model='formData3.pass' type="password"></el-input>
        </el-form-item>
        <el-form-item prop='checkPass' label='确认密码'>
          <el-input v-model='formData3.checkPass' type="password"></el-input>
        </el-form-item>
        <el-form-item prop='name' label='昵称'>
          <el-input v-model='formData3.name'></el-input>
        </el-form-item>
        <el-form-item prop='information' label='客户信息'>
          <el-input v-model='formData3.information'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click='onSubmit3'>提交</el-button>
          <el-button @click='resetFields("formRef3")'>重置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>

</div>
</body>

</html>

<style>
    .el-input .el-select {
        width: 130px;
    }
</style>

<script>
    new Vue({
        el: '#app',
        data() {

            return {
                options: [],
                activeName: 'second',
                formData: {
                    username: '',
                    pass: '',
                    checkPass: '',
                    information: '',
                    name: '',
                },
                formData2: {
                    username: '',
                    pass: '',
                    checkPass: '',
                    information: '',
                    name: '',
                    renterid: '',
                },
                formData3: {
                    username: '',
                    pass: '',
                    checkPass: '',
                    information: '',
                    name: '',
                },
                formRule: {
                    username: [{required: true, validator: this.validatorUse, trigger: 'blur'}],
                    pass: [{required: true, validator: this.validatorPass, trigger: 'blur'}],
                    checkPass: [{required: true, validator: this.validatorCheckPass, trigger: 'blur'}],
                    name: [{required: true, validator: this.validatorName, trigger: 'blur'}],
                    information: [{required: true, validator: this.validatorInformation, trigger: 'blur'}],
                },
                formRule2: {
                    username: [{required: true, validator: this.validatorUse1, trigger: 'blur'}],
                    pass: [{required: true, validator: this.validatorPass1, trigger: 'blur'}],
                    checkPass: [{required: true, validator: this.validatorCheckPass1, trigger: 'blur'}],
                    name: [{required: true, validator: this.validatorName1, trigger: 'blur'}],
                    information: [{required: true, validator: this.validatorInformation1, trigger: 'blur'}],
                },
                formRule3: {
                    username: [{required: true, validator: this.validatorUse2, trigger: 'blur'}],
                    pass: [{required: true, validator: this.validatorPass2, trigger: 'blur'}],
                    checkPass: [{required: true, validator: this.validatorCheckPass2, trigger: 'blur'}],
                    name: [{required: true, validator: this.validatorName2, trigger: 'blur'}],
                    information: [{required: true, validator: this.validatorInformation2, trigger: 'blur'}],
                },

            }
        },
        methods: {


            validatorUse(rule, value, callback) {
                if (!value) {
                    callback(new Error('租户名不能为空'))
                }

                axios.get("http://localhost:8080/register/renter/" + value).then(res => {
                    console.log(res.data)
                    var v = res.data;
                    if (v.code != "200") {
                        if (v.data == "renterRepeat") {
                            callback(new Error("租户名重复"))
                        }
                    } else {
                        callback()
                    }
                })
            },
            validatorPass(rule, value, callback) {
                if (!value) {
                    callback(new Error('密码不能为空'))
                }
                if (this.formData.checkPass != null) {
                    this.$refs['formRef1'].validateField("checkPass")
                }

                callback()
            },
            validatorCheckPass(rule, value, callback) {
                if (!value) {
                    callback(new Error('确认密码不能为空'))
                }
                if (value != this.formData.pass) {
                    callback(new Error('密码不一致'))
                }
                callback()
            },
            validatorName(rule, value, callback) {
                if (!value) {
                    callback(new Error('昵称不能为空'))
                }
                callback()
            },
            validatorInformation(rule, value, callback) {
                if (!value) {
                    callback(new Error('信息不能为空'))
                }
                if (String(value).length > 50) {
                    callback(new Error('信息过多'))
                }
                callback()
            },
            validatorUse1(rule, value, callback) {
                if (!value) {
                    callback(new Error('用户名不能为空'))
                }
                axios.get("http://localhost:8080/register/user/" + value).then(res => {
                    console.log(res.data)
                    var v = res.data;
                    if (v.code != "200") {
                        if (v.data == "userRepeat") {
                            callback(new Error("用户名重复"))
                        }

                    } else {
                        callback()
                    }
                })

            },
            validatorPass1(rule, value, callback) {
                if (!value) {
                    callback(new Error('密码不能为空'))
                }
                if (this.formData2.checkPass != null) {
                    this.$refs['formRef2'].validateField("checkPass")
                }
                callback()
            },
            validatorCheckPass1(rule, value, callback) {
                if (!value) {
                    callback(new Error('确认密码不能为空'))
                }
                if (value != this.formData2.pass) {
                    callback(new Error('密码不一致'))
                }
                callback()
            },
            validatorName1(rule, value, callback) {
                if (!value) {
                    callback(new Error('昵称不能为空'))
                }
                callback()
            },
            validatorInformation1(rule, value, callback) {
                if (!value) {
                    callback(new Error('信息不能为空'))
                }
                if (String(value).length > 50) {
                    callback(new Error('信息过多'))
                }
                callback()
            },
            validatorUse2(rule, value, callback) {
                if (!value) {
                    callback(new Error('答者名不能为空'))
                }
                axios.get("http://localhost:8080/register/replier/" + value).then(res => {
                    console.log(res.data)
                    var v = res.data;
                    if (v.code != "200") {
                        if (v.data == "replierRepeat") {
                            callback(new Error("答者名重复"))
                        }
                    } else {
                        callback()
                    }
                })
            },
            validatorPass2(rule, value, callback) {
                if (!value) {
                    callback(new Error('密码不能为空'))
                }
                if (this.formData3.checkPass != null) {
                    this.$refs['formRef3'].validateField("checkPass")
                }
                callback()
            },
            validatorCheckPass2(rule, value, callback) {
                if (!value) {
                    callback(new Error('确认密码不能为空'))
                }
                if (value != this.formData3.pass) {
                    callback(new Error('密码不一致'))
                }
                callback()
            },
            validatorName2(rule, value, callback) {
                if (!value) {
                    callback(new Error('昵称不能为空'))
                }
                callback()
            },
            validatorInformation2(rule, value, callback) {
                if (!value) {
                    callback(new Error('信息不能为空'))
                }
                if (String(value).length > 50) {
                    callback(new Error('信息过多'))
                }
                callback()
            },
            onSubmit() {
                this.$refs['formRef1'].validate(valid => {
                    if (valid) {
                        let data = {
                            "userName": this.formData.username,
                            "passWord": SHA256(this.formData.pass),
                            "infor": this.formData.information,
                            "name": this.formData.name,
                            "flag": 1
                        }
                        axios.post("http://localhost:8080/register", data)
                            .then(res => {
                                console.log(res);
                                var co = res.data.code;
                                var mes = res.data.message;
                                if (co == 200) {
                                    if (mes == "renter") {
                                        window.location.href = "Login.html";
                                    } else {
                                        alert("注册失败");
                                    }
                                }
                            })
                    }
                })
            },
            onSubmit2() {
                this.$refs['formRef2'].validate(valid => {
                    if (valid) {
                        let data = {
                            "userName": this.formData2.username,
                            "passWord": SHA256(this.formData2.pass),
                            "infor": this.formData2.information,
                            "renterid": this.formData2.renterid,
                            "name": this.formData2.name,
                            "flag": 2
                        }
                        axios.post("http://localhost:8080/register", data)
                            .then(res => {
                                console.log(res);
                                var co = res.data.code;
                                var mes = res.data.message;
                                if (co == 200) {
                                    if (mes == "user") {
                                        window.location.href = "Login.html";
                                    } else {
                                        alert("注册失败");
                                    }
                                }
                            })
                    }
                })
            },
            onSubmit3() {
                this.$refs['formRef3'].validate(valid => {
                    if (valid) {
                        let data = {
                            "userName": this.formData3.username,
                            "passWord": SHA256(this.formData3.pass),
                            "infor": this.formData3.information,
                            "name": this.formData3.name,
                            "flag": 3
                        }
                        axios.post("http://localhost:8080/register", data)
                            .then(res => {
                                console.log(res);
                                var co = res.data.code;
                                var mes = res.data.message;
                                if (co == 200) {
                                    if (mes == "replier") {
                                        window.location.href = "Login.html";
                                    } else {
                                        alert("注册失败");
                                    }
                                }
                            })
                    }
                })
            },
            resetFields(formRef) {
                this.$refs[formRef].resetFields();
            },
            onSearch() {
                console.log(this.formData2)
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
        },
        created() {

            axios.get("http://localhost:8080/register").then(res => {
                this.options = res.data.data;
            })

        },
    })
</script>
